<template>
    <div class="section" ref='section'>
        <div class="header">
            <span class="title">{{section.name}}</span>
            <slot></slot>
        </div>
        <BlockList :list='showlist'></BlockList>
    </div>
</template>

<script>
import BlockList from './BlockList'
export default {
    components:{BlockList},
    data(){
        return {
            list:[],
            showlist:[],
            pagenum:1,
        }
    },
    props:['section','num','page'],
    mounted(){
        window.addEventListener('scroll',this.bundleScroll)
        console.log(this.$refs)
        if(this.$refs.section.offsetTop<window.screen.height){
            if(!this.page){
                window.removeEventListener('scroll',this.bundleScroll)
            }
            this.setList()
            console.log("ref"+this.$refs)
        }
    },
    methods:{
        bundleScroll(){
            const screenheight=window.screen.height
            console.log(this.$refs)
            console.log(this.$refs.section)
            console.log(this.$refs.section.offsetTop)
            console.log(this.$refs.section.offsetHeight)
            console.log(screenheight)
            console.log(document.scrollingElement.scrollTop)
            if(this.$refs.section.offsetTop+this.$refs.section.offsetHeight<document.scrollingElement.scrollTop+screenheight*1.5){
                this.setList()
            }
        },
        setList(){
            if(this.page){
                const url='/static/x/web-interface/dynamic/region?rid='+this.section.rid+'&pn='
                this.$axios.get(url+(this.pagenum++)).then(res=>{
                    this.list.push(...res.data.data.archives)
                    this.showlist=this.list
                })
                if(this.pagenum==5){
                    window.removeEventListener('scroll',this.bundleScroll)
                }
            }
            else
            {
                this.$axios.get('/static/x/web-interface/ranking/region?rid='+this.section.rid+'&day=7').then(res=>
                {
                    this.list=res.data.data
                    if(this.num)
                        this.showlist=this.list.slice(0,this.num)
                    else
                        this.setList=this.list
                })
                window.removeEventListener('scroll',this.bundleScroll)
            }
        console.log(this.showlist)
        }
    },
}
</script>

<style lang='less' scoped>
@import '../../assets/css/common';
.section{
    min-height: 45vh;
    .header{
        margin: 1.7rem auto 1.05rem ;
        width: 92%;
        .title{
            font-size: 1.2rem;
        }
    }
}
</style>